import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/dishes/dishes_view/dishes_top.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

const List<Color> diColor = [
  Color(0xff19140E),
  Color(0xffFA8303),
  Color(0xffFCC302),
  Color(0xffFCD576),
  Color(0xffB3D25B),
];

class DishesPage extends StatelessWidget {
  const DishesPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: HYSizeFit.screenWidth,
        height: HYSizeFit.screenHeight,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.centerRight,
            colors: [Color(0xfffdecd8), Color(0xfffdedd4), Color(0xfff6faec)],
          ),
        ),
        padding: EdgeInsets.only(top: 94.rpx),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const DishesTop(),
            Padding(
              padding: EdgeInsets.only(left: 54.rpx, bottom: 16.rpx),
              child: Text(
                '总体营养评分',
                style: TextStyle(fontSize: 19.rpx, color: Colors.black),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 54.rpx, right: 53.rpx),
              child: Container(
                height: 65.rpx,
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15.rpx),
                ),
                child: ListView.builder(
                  itemCount: diColor.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return Container(
                      width: 65.rpx,
                      height: 65.rpx,
                      margin: EdgeInsets.only(right: 7.5.rpx),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.rpx),
                        color: diColor[index],
                      ),
                      child: Text(
                        '${(index + 3) * 10}',
                        style: TextStyle(color: Colors.white, fontSize: 14.rpx),
                      ),
                    );
                  },
                ),
              ),
            ),
            SizedBox(height: 26.rpx),
            pres(),
            pres(
              text: '米粉（干）',
              ke: '200',
              w: 114.rpx,
              color: const Color(0xffFBC306),
            ),
            pres(
              text: '姜片',
              ke: '20',
              w: 37.rpx,
            ),
            pres(
              text: '蒜片',
              ke: '10',
              w: 19.rpx,
              color: const Color(0xffFBC306),
            ),
            pres(
              text: '老抽',
              ke: '4',
              w: 12.rpx,
            ),
            pres(
              text: '红薯淀粉',
              ke: '6',
              w: 14.rpx,
              color: const Color(0xffFBC306),
            ),
            pres(
              text: '食用油',
              ke: '20',
              w: 41.rpx,
            ),
          ],
        ),
      ),
    );
  }

  Widget pres({text = '牛肉片', ke = '400', w, color}) {
    return Padding(
      padding: EdgeInsets.only(left: 40.rpx, right: 60.rpx, bottom: 18.rpx),
      child: SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  text,
                  style: TextStyle(
                      color: const Color(0xff343434), fontSize: 19.rpx),
                ),
                Text(
                  '$ke克',
                  style: TextStyle(
                      color: const Color(0xff9EA9B1), fontSize: 16.rpx),
                ),
              ],
            ),
            Container(
              width: w ?? 230.rpx,
              height: 10.rpx,
              margin: EdgeInsets.only(top: 8.rpx),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.rpx),
                color: color ?? const Color(0xffFE9C2D),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
